<template>
  <el-dialog
      title="搜索"
      :visible.sync="dialogStatus.searchVisible"
      width="22%"
      :modal="false"
      v-el-drag-dialog
      append-to-body>
    <el-form label-width="0" :model="searchForm1">
      <el-form-item>
        <!--        <el-select v-model="searchForm.value1" placeholder="请选择" size="small" style="width:100px;">-->
        <!--          <el-option-->
        <!--              v-for="item in options1"-->
        <!--              :key="item.value"-->
        <!--              :label="item.label"-->
        <!--              :value="item.value">-->
        <!--          </el-option>-->
        <!--        </el-select>-->
        <el-input v-model="searchForm1.id" placeholder="请输入ID" size="small"
                  style="width:100px;margin-right:15px;"></el-input>
        <el-input v-model="searchForm1.name" placeholder="请输入姓名" size="small"
                  style="width:100px;margin-right:15px;"></el-input>
        <el-input v-model="searchForm1.sex" placeholder="请输入性别" size="small" style="width:100px;"></el-input>
        <div class="scntBtn">
          <el-button type="info" class="scnt-btn" icon="el-icon-refresh" size="small" @click="resetDialog">重置
          </el-button>
          <el-button type="info" class="scnt-btn" icon="el-icon-search" size="small" style="float: right"
                     @click="recordSearch(searchForm1)">搜索
          </el-button>
        </div>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import {mapState, mapMutations, mapActions} from 'vuex'
import elDragDialog from "@/directive/el-dragDialog";

export default {
  name: "SearchDialog",
  directives: {
    elDragDialog
  },
  data() {
    return {}
  },
  computed: {
    ...mapState('score', ['dialogStatus', 'page', 'limit', 'searchForm1'])
  },
  methods: {
    ...mapActions('score', ['recordSearch']),
    //重置dialog内容
    resetDialog() {
      this.searchForm.id = ''
      this.searchForm.name = ''
      this.searchForm.sex = ''
    }
  }
}
</script>

<style scoped>
.scntBtn {
  border-top: 1px solid #c2c2c2;
  margin-top: 10px;
  padding-top: 10px;
}

.scnt-btn:hover {
  color: #0c0c0c;
  border: 1px solid #0c0c0c;
}
</style>